<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的购物车</title>
   <!-- CSS only -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<!-- JS, Popper.js, and jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- <script src="index.js"></script> -->
</head> 
<body>
    <div id="root">
      <div class="panel panel-info" style="margin:20px;">
         <!-- 头部 -->
        <div class="panel-heading">
            <h1 style="display: inline-block;">学员管理</h1>
            <span>
                <button type="button" class="btn btn-primary">
                  学员总数 <span class="badge badge-light">4</span>
                </button>
            </span>
        </div>
        <!-- 内容 -->
        <div class="panel-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                      <label for="firstname" class="col-sm-2 control-label">学号</label>
                      <div class="col-sm-10">
                        <input type="text" class="form-control" id="firstname" placeholder="请输入学号">
                      </div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <input type="radio" name="gender" id="man" 
                            value="0" class="input-control"> 男
                            <input type="radio" name="gender" id="woman" 
                            value="1" class="input-control" checked> 女
                        </div>
                      </div>
                    <div class="form-group">
                      <label for="lastname" class="col-sm-2 control-label">姓名</label>
                      <div class="col-sm-10">
                        <input type="text" class="form-control" id="lastname" placeholder="请输入姓名">
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="col-sm-offset-2 col-sm-10">
                        <div class="form-group">
                            <label for="name">学员状态</label>
                            <select class="form-control">
                              <option>在读</option>
                              <option>休学中</option>
                              <option>已退学</option>
                              <option>已肄业</option>
                              <option>已毕业</option>
                            </select>
                          </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-danger" onclick="add()">创建</button>
                      </div>
                    </div>
                  </form>
            <table class="table table-striped">
              <thead>
                <tr>
                  <th><input type="checkbox" class="input-control" onclick="checkAll(this)" id="chkAll"></th>
                  <th>学号</th>
                  <th>姓名</th>
                  <th>性别</th>
                  <th>状态</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody id="tableData">
                <tr>
                  <td><input type="checkbox" class="input-control" name="ids"></td>
                  <td>202590223001</td>
                  <td>周杰伦</td>
                  <td>男</td>
                  <td>在读</td>
                  <td>
                      <button type="button" class="btn btn-info">编辑</button>
                      <button type="button" class="btn" onclick="btn(this)">删除</button>
                  </td>
                </tr>
              </tbody>
              <tfoot>
                   <tr>
                     <td colspan="6" align="left">
                            <button type="button" class="btn btn-danger" onclick="delAll()">批量删除</button>
                     </td>
                   </tr>
              </tfoot>
            </table>
        </div>
      </div>
           
    </div>
      
    <script>
      //添加
      function add(){  
        var firstname=document.getElementById('firstname').value;
        var man=document.getElementById('man').value;
        var woman=document.getElementById('woman').value;
        var lastname=document.getElementById('lastname').value;
        var formControl=document.getElementsByClassName('form-control').value;
        if(firstname.trim()==''||man.trim()==''||woman.trim()==''||lastname.trim()==''||formControl.trim()==''){
          return;
        }
        var tdHtml="<td><input type='checkbox' class='input-control'></td>";
          tdHtml += "<td>"+firstname+"</td>";
          tdHtml += "<td>"+lastname+"</td>";
          // tdHtml += "<td>"+man+"</td>";
          tdHtml += "<td>"+woman+"</td>";
          tdHtml += "<td>"+formControl+"</td>";
          tdHtml += "<td><button type=\"button\" class=\"btn btn-info\">编辑</button>\
                      <button type=\"button\" class=\"btn btn-danger\" onclick=\"del(this)\">删除</button></td>";
          var oTr=document.createElement("tr");
          var trFragment=document.createDocumentFragment();
          oTr.innerHTML=tdHtml;
          trFragment.appendChild(oTr);
          document.getElementById('tableData').appendChild(trFragment);                  
      }
      //删除
      function btn(obj){
        var delFlag = window.confirm('确认要删除吗？');
        if(delFlag){
          var delTr=obj.parentElement.parentElement;
          var oTbody=document.getElementById('tableData');
          oTbody.removeChild(delTr);
        }
      }

      //全选
      function checkAll(obj){
        var isChecked=obj.checked;
        var items = document.getElementsByName('ids');
          items.forEach((item) => {
            item.checked = isChecked;
          });
      }

      //全选删除
      function delAll(){
        var oTbody=document.getElementById('tableData');
        var items=document.getElementsByName('ids');
        var checkAll=document.getElementById('chkAll');
        var count=0;
        var delltems=[];
        for(var item of items){
          if(item.checked){
            count++;
            delltems.push(item);
          }
        }
        if(count>0){
          var flag = confirm('确定要删除选中的记录吗？')
            if(flag){
              for(var i=0;i<delltems.length;i++){
                var delltem=delltems[i];
                var delTr=delltem.parentElement.parentElement;
                oTbody.removeChild(delTr);
              }
              checkAll.checked=false;
            }
        }
      }
    </script>
</body>
</html>